<template>
  <div :style="{display: 'flex','flexDirection': 'column','width': '100%','height': height}">
    <u-navbar ref="top" v-if="topShow"/>
    <div :style="{display: 'flex','flexDirection': 'column','width': '100%','height': heightContent}">
      <keep-alive>
        <component :is="component" :query="query" :key="component.key" @jumpTo="jumpTo"></component>
      </keep-alive>
    </div>
    <tabbar ref="bottom"  :selectTabOut="selectTab" @changeTab="changeTab" v-show="bottomVisible"></tabbar>
  </div>
</template>

<script>
import Tabbar from "./tabbar";
import my from "./content/my/my.vue";
import apply from "./content/sb/apply.vue";
import applyList from "./content/list/applyList.vue";
import applyListDetail from "./content/list/applyListDetail.vue";
import home from "./content/zy/home.vue";

export default {
  components: {Tabbar},
  computed: {
  },
  data() {
    return {
      selectTab:0,
      component:home,
      query:{},
      bottomVisible:true,
      topShow:true,
      mapper:[
        {'/pages/exam/home':home},
        {'/pages/exam/apply':apply},
        {'/pages/exam/applyList':applyList,'/pages/exam/applyListDetail':applyListDetail},
        {'/pages/exam/my':my},
      ],

      height: '',
      heightContent:'',
      heightContentNoTop:'',
      allPathArr:[]
    }
  },
  methods:{
    jumpTo(e){
      this.$refs.bottom.clickTab(e)
    },
    changeTab(e){
      this.selectTab = e
      let keys = Object.keys(this.mapper[e])
      let temp = this.mapper[e][keys[0]]
      this.component = temp
    },
  },
  created(){
    this.$nextTick(function () {
      let height = Math.max(
          document.documentElement.scrollHeight,
          document.body.scrollHeight
      )
      this.height = height + 'px'
      this.heightContent = (height-this.$refs.bottom.$el.clientHeight) + 'px'
      this.heightContentNoTop = (height-this.$refs.bottom.$el.clientHeight-this.$refs.top.$el.clientHeight - 40) + 'px'
      this.topShow = false
      this.$store.state.heightContentNo = this.heightContent
      this.$store.state.heightContentNoTop = this.heightContentNoTop

    });
    // 調用事件总线
    // this.$root.$emit('getEmitter','/pages/exam/main')
    // 创建事件总线,所有的都能监听到  freshComponentPath 表示刷新这个组件的path路径
    this.$root.$on('getEmitter',(path,query,freshComponentPath=[])=>{
      if (window.intervalId) clearInterval(window.intervalId);
      console.log('监听到-start')
      for (let i = 0; i < this.mapper.length; i++) {
        let keys = Object.keys(this.mapper[i])
        for (let j = 0; j < keys.length; j++) {
          if (!this.mapper[i][keys[j]].key){
            this.mapper[i][keys[j]].key =  keys[j]
          }
        }
      }
      console.log('监听到-start1')


      try{
        for (let i = 0; i < this.mapper.length; i++) {
          let keys = Object.keys(this.mapper[i])
          for (let j = 0; j < keys.length; j++) {
            // 缓存更新
            for (let k = 0; k < freshComponentPath.length; k++) {
              if (freshComponentPath[k]==keys[j]){
                let arr = this.mapper[i][keys[j]].key.split('?')
                if (arr && arr.length){
                  this.mapper[i][keys[j]].key = arr[0] + '?'+ (new Date().getTime())
                }else{
                  this.mapper[i][keys[j]].key += '?'+ (new Date().getTime())
                }
              }
            }
          }
        }
      }catch (e){
        console.log('监听到-stadrt1-缓存2','异常')
      }


      console.log('this.mapper',this.mapper)


      for (let i = 0; i < this.mapper.length; i++) {
        let keys = Object.keys(this.mapper[i])
        let values = Object.values(this.mapper[i])
        for (let j = 0; j < keys.length; j++) {
          if (keys[j]===path) {
            this.component = values[j];
            this.selectTab = i;
            this.query = query;
            break;
          }
        }
      }
      console.log('监听到-start3')

    })
    // this.$root.$emit('setBottomVisible',false)
    this.$root.$on('setBottomVisible',(bottomVisible)=>{
      this.bottomVisible = bottomVisible
    })
  }
}
</script>

<style>
::v-deep .u-navbar__content__right__text{
  color: #FFFFFF;
}
::v-deep.u-button--square{
  border-radius: 0;
}
::v-deep .u-navbar--fixed{
  position: relative;
  clear: both;
}

</style>
